<script>
import MAIN_STORE from "@/store/store.js";
import { Expand, Fold } from "@element-plus/icons-vue";
import Api from "@/api";
import informationHeat from "@/components/informationHeat/information-heat.vue";
import { createApp, h } from "vue";
import iconCompany from './images/icon-企业.svg';
import iconReyuyan from './images/icon-热源.svg';
import iconGongreguanxian from './images/icon-供热管线.svg';
import iconGongrefanwei from './images/icon-供热范围.svg';
import iconHuanrezhan from './images/icon-换热站.svg';
import iconJianxiujing from './images/icon-检修井.svg';
import iconFamen from './images/icon-阀门.svg';

const LayerObj = window.LayerObj = {}
const HalfLayer = []
let ListenerClick = null;
let ListenerMove = null;
let overlayIns = null;
//  选中的线
let SelectedLine = null;
let SelectedArea = null;
// 层级

// 热源 10
// 换热站 12
// 供热管线 11
// 供热范围 13
// 检修井 + 阀门 13
// 热源站点
function AddGonrezhanLayer(layerName, res, callback) {
  MAIN_STORE.GLOBAL_MAP_INS.getAllLayers().forEach(v => {
    if (v.get('self-name') === 'gongre-1') {
      MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v)
    }
    if (v.get('self-name') === 'gongre-2') {
      MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v)
    }
  })
  const vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(res)
  });
  const vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    minZoom: 10,
    declutter: true,
    style: function (feature) {
      return [
        new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'rgba(255, 99, 71, 0.2)'
          }),
          stroke: new ol.style.Stroke({
            color: 'rgba(255, 99, 71, 1)',
            lineDash: [5, 5],
            width: 1
          }),
        })
      ]
    }
  });
  vectorLayer.setZIndex(12);
  vectorLayer.set('self-name', 'gongre-1')
  LayerObj[layerName] = [vectorLayer];
  MAIN_STORE.GLOBAL_MAP_INS.addLayer(vectorLayer);

  const copyData = JSON.parse(JSON.stringify(res));
  copyData.features.forEach(v => {
    v.geometry.type = 'Point';
    const c = turf.center(turf.polygon(v.geometry.coordinates[0]))
    v.geometry.coordinates = c.geometry.coordinates
  })

  const vectorSourceCopy = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(copyData)
  });
  const vectorLayerCopy = new ol.layer.Vector({
    source: vectorSourceCopy,
    minZoom: 10,
    // 取消避让
    declutter: false,
    style: function (feature) {
      // 单独设置属性 重要
      feature.set('Z_SELF_TYPE', '热源');
      return [
        new ol.style.Style({
          image: new ol.style.Icon({
            src: './images/icons-pos/热源.svg',
            scale: 0.2,
          }),
          text: new ol.style.Text({
            offsetY: -25,
            text: feature.get('ZDMC'),
            font: '12px Calibri,sans-serif',
            fill: new ol.style.Fill({
              color: '#000'
            }),
            stroke: new ol.style.Stroke({
              color: '#fff',
              width: 3
            })
          })
        })
      ]
    }
  });
  vectorLayerCopy.setZIndex(12);
  vectorLayerCopy.set('self-name', 'gongre-2')
  LayerObj[layerName].push(vectorLayerCopy);
  MAIN_STORE.GLOBAL_MAP_INS.addLayer(vectorLayerCopy);
  if (callback) {
    HalfLayer.push(vectorLayer)
    HalfLayer.push(vectorLayerCopy)
    callback()
  }
}
// 换热站站点
function AddHuanrezhanLayer(layerName, res, callback) {
  MAIN_STORE.GLOBAL_MAP_INS.getAllLayers().forEach(v => {
    if (v.get('self-name') === 'huanre-1') {
      MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v)
    }
  })
  const vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(res)
  });
  let vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    declutter: true,
    minZoom: 11,
    style: function (feature) {
      feature.set('Z_SELF_TYPE', '换热站');
      return [
        new ol.style.Style({
          image: new ol.style.Icon({
            src: feature.get('SFZG') === '是' ? './images/icons-pos/换热站-自管.svg' : './images/icons-pos/换热站-居民.svg',
            scale: 0.15
          }),
          text: new ol.style.Text({
            offsetY: -25,
            text: feature.get('HRZMC'),
            font: '12px Calibri,sans-serif',
            fill: new ol.style.Fill({
              color: '#000'
            }),
            stroke: new ol.style.Stroke({
              color: '#fff',
              width: 3
            })
          })
        })
      ];
    }
  });
  vectorLayer.setZIndex(12);
  vectorLayer.set('self-name', 'huanre-1')
  LayerObj[layerName] = [vectorLayer];
  MAIN_STORE.GLOBAL_MAP_INS.addLayer(vectorLayer); // 将图层添加到地图上
  if (callback) {
    HalfLayer.push(vectorLayer)
    callback()
  }
}
// 供热范围
function AddGongreFanwei(layerName, res, callback) {
  MAIN_STORE.GLOBAL_MAP_INS.getAllLayers().forEach(v => {
    if (v.get('self-name') === 'fanwei-1') {
      MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v)
    }
  })

  const vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(res) // 将 GeoJSON 数据转换为 OpenLayers 的 features
  });
  // 在点击时计算中心点
  const vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    minZoom: 11,
    style: function (feature) {
      feature.set('Z_SELF_TYPE', '供热范围');
      return [new ol.style.Style({ // 可选：自定义样式
        // 220, 250, 255 蓝白
        // 255, 235, 95  黄白
        fill: new ol.style.Fill({
          color: 'rgba(255, 235, 95, 0.4)',
        }),
        stroke: new ol.style.Stroke({
          color: 'rgba(60, 60, 60, 1)',
          // lineDash: [10, 5],
          width: 0.5
        })
      })]
    },
  });
  vectorLayer.setZIndex(10);
  vectorLayer.set('self-name', 'fanwei-1')
  LayerObj[layerName] = [vectorLayer];
  MAIN_STORE.GLOBAL_MAP_INS.addLayer(vectorLayer); // 将图层添加到地图上
  if (callback) {
    HalfLayer.push(vectorLayer)
    callback()
  }
}
// 供热企业
function AddGongreCompany(layerName, res, callback) {
  MAIN_STORE.GLOBAL_MAP_INS.getAllLayers().forEach(v => {
    if (v.get('self-name') === 'company-1') {
      MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v)
    }
    if (v.get('self-name') === 'company-2') {
      MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v)
    }
  })

  const vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(res) // 将 GeoJSON 数据转换为 OpenLayers 的 features
  });
  // 在点击时计算中心点
  const vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    minZoom: 9,
    style: function (feature) {
      feature.set('Z_SELF_TYPE', '供热企业');
      feature.set('Z_SELF_TYPE_INNER', '供热企业-AREA');
      const name = feature.get('SHORTNAME')
      return [new ol.style.Style({ // 可选：自定义样式
        fill: new ol.style.Fill({
          color: 'rgba(255, 25, 35, .2)',
        }),
        stroke: new ol.style.Stroke({
          color: 'rgba(255, 255, 255, 1)',
          lineDash: [10, 5],
          width: 0.5
        }),
        text: new ol.style.Text({
          text: name || '',
          font: '16px alimamashuheiti',
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 1)'
          }),
          stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 0, 1)',
            width: 2
          }),
        })
      })]
    },
  });
  vectorLayer.setZIndex(9);
  vectorLayer.set('self-name', 'company-1')
  LayerObj[layerName] = [vectorLayer];
  MAIN_STORE.GLOBAL_MAP_INS.addLayer(vectorLayer); // 将图层添加到地图上

  const copyData = JSON.parse(JSON.stringify(res));
  copyData.features.forEach(v => {
    v.geometry.type = 'Point';
    v.geometry.coordinates = [v.properties.LON, v.properties.LAT]
  })
  const vectorSourceCopy = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(copyData)
  });
  const vectorLayerCopy = new ol.layer.Vector({
    source: vectorSourceCopy,
    minZoom: 10,
    // 取消避让
    declutter: false,
    style: function (feature) {
      // 单独设置属性 重要
      feature.set('Z_SELF_TYPE', '供热企业');
      feature.set('Z_SELF_TYPE_INNER', '供热企业-POINT');
      return [
        new ol.style.Style({
          image: new ol.style.Icon({
            src: './images/icons-pos/企业.svg',
            scale: 0.25,
          }),
          text: new ol.style.Text({
            offsetY: -25,
            text: feature.get('SHORTNAME'),
            font: '13px Calibri,sans-serif',
            fill: new ol.style.Fill({
              color: '#fff'
            }),
            stroke: new ol.style.Stroke({
              color: '#000',
              width: 3
            })
          })
        })
      ]
    }
  });
  vectorLayerCopy.setZIndex(12);
  vectorLayerCopy.set('self-name', 'company-2')
  LayerObj[layerName].push(vectorLayerCopy);
  MAIN_STORE.GLOBAL_MAP_INS.addLayer(vectorLayerCopy);

  if (callback) {
    HalfLayer.push(vectorLayer)
    callback()
  }
}
function LoadGeoServerReso(layerName, filter) {
  if (layerName === 'heat:pipline') {
    // 线
    Api.getDataOfGRGX({
      ids: [],
      fields: ['SMID']
    }).then(res => {
      const vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(res) // 将 GeoJSON 数据转换为 OpenLayers 的 features
      });
      const vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        minZoom: 11,
        style: function (feature) {
          feature.set('Z_SELF_TYPE', '供热管线')
          return [new ol.style.Style({ // 可选：自定义样式
            stroke: new ol.style.Stroke({
              color: 'rgb(255, 128, 0)',
              width: 2
            })
          })]
        }
      });
      vectorLayer.setZIndex(11);
      LayerObj[layerName] = [vectorLayer];
      MAIN_STORE.GLOBAL_MAP_INS.addLayer(vectorLayer); // 将图层添加到地图上
    })
  } else if (layerName === 'heat:area') {
    // 面
    Api.getDataOfGRFW({
      ids: [],
      fields: ['QYMC', 'HRZMC']
    }).then(res => {
      AddGongreFanwei(layerName, res)
    })
  } else if (layerName === 'heat:grz') {
    Api.getDataOfGRZ({
      ids: [],
      fields: ['SMID', 'ZJBM', 'ZDMC', 'DWMC', 'RYDZ', 'FZR', 'LXFS']
    }).then(res => {
      AddGonrezhanLayer(layerName, res)
    })
  } else if (layerName === 'heat:hrz') {
    Api.getDataOfHRZ({
      ids: [],
      fields: ['SMID', 'HRZBM', 'HRZMC', 'SFZG']
    }).then(res => {
      AddHuanrezhanLayer(layerName, res);
    })
  } else if (layerName === 'heat:well') {
    Api.getDataOfJXJ({
      ids: [],
      fields: ['SMID']
    }).then(res => {
      const vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(res)
      });
      let vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        declutter: true,
        minZoom: 13,
        style: function (feature) {
          feature.set('Z_SELF_TYPE', '检修井');
          return [
            new ol.style.Style({
              image: new ol.style.Icon({
                src: './images/icons-pos/检修井.svg',
                scale: 0.14
              }),
              text: new ol.style.Text({
                offsetY: -25,
                text: feature.get('HRZMC'),
                font: '12px Calibri,sans-serif',
                fill: new ol.style.Fill({
                  color: '#000'
                }),
                stroke: new ol.style.Stroke({
                  color: '#fff',
                  width: 3
                })
              })
            })
          ];
        }
      });
      vectorLayer.setZIndex(12);
      LayerObj[layerName] = [vectorLayer];
      MAIN_STORE.GLOBAL_MAP_INS.addLayer(vectorLayer); // 将图层添加到地图上
    })
  } else if (layerName === 'heat:falve') {
    Api.getDataOfFAMEN({
      ids: [],
      fields: ['SMID']
    }).then(res => {
      const vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(res)
      });
      let vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        declutter: true,
        minZoom: 13,
        style: function (feature) {
          feature.set('Z_SELF_TYPE', '阀门');
          return [
            new ol.style.Style({
              image: new ol.style.Icon({
                src: './images/icons-pos/阀门.svg',
                scale: 0.14
              }),
              text: new ol.style.Text({
                offsetY: -25,
                text: '',
                // text: feature.get('HRZMC'),
                font: '12px Calibri,sans-serif',
                fill: new ol.style.Fill({
                  color: '#000'
                }),
                stroke: new ol.style.Stroke({
                  color: '#fff',
                  width: 3
                })
              })
            })
          ];
        }
      });
      vectorLayer.setZIndex(12);
      LayerObj[layerName] = [vectorLayer];
      MAIN_STORE.GLOBAL_MAP_INS.addLayer(vectorLayer); // 将图层添加到地图上
    })
  } else if (layerName === 'heat:company') {
    // 面
    Api.getDataOfCompany({
      ids: [],
      fields: ['SMID', 'NAME', 'SHORTNAME', 'LON', 'LAT', 'ADDRESS']
    }).then(res => {
      AddGongreCompany(layerName, res)
    })
  }
}

let rerenderHighlightLayer = () => { }
let reciveTabledata = () => { };
export default {
  /**
   * 图层树
  */
  name: "layer-tree",
  components: { Expand, Fold },
  data() {
    return {
      // 默认坍缩状态
      collapsed: true,
      valueFlow: false,
      valueLegend: false,
      defaultProps: {
        children: "children",
        label: "name",
        class: "self-tree-item",
      },
      treeData: [
        {
          name: "供热数据",
          children: [
            {
              name: "供热区划",
              id: "heat:company",
              layerName: "heat:company",
              isLeaf: true,
              icon: iconCompany,
              children: []
            },
            {
              name: "热源",
              id: "heat:grz",
              layerName: "heat:grz",
              isLeaf: true,
              icon: iconReyuyan,
              children: []
            },
            // {
            //   name: "供热管线",
            //   id: "heat:pipline",
            //   layerName: "heat:pipline",
            //   isLeaf: true,
            //   icon: iconGongreguanxian,
            //   children: []
            // },
            {
              name: "换热站",
              id: "heat:hrz",
              layerName: "heat:hrz",
              isLeaf: true,
              icon: iconHuanrezhan,
              children: []
            },
            {
              name: "供热范围",
              id: "heat:area",
              layerName: "heat:area",
              isLeaf: true,
              icon: iconGongrefanwei,
              children: []
            },
            {
              name: "检修井",
              id: "heat:well",
              layerName: "heat:well",
              isLeaf: true,
              icon: iconJianxiujing,
              children: []
            },
            {
              name: "阀门",
              id: "heat:falve",
              layerName: "heat:falve",
              isLeaf: true,
              icon: iconFamen,
              children: []
            }
          ]
        }
      ],
      defaultCheckedKeys: [
        "heat:area",
        // "heat:well",
        // "heat:falve",
        "heat:hrz",
        // "heat:pipline",
        "heat:grz",
        "heat:company"
      ],
    };
  },
  computed: {
    showLegend() {
      const tag1 = ['Search', 'Decision'].indexOf(this.$route.name) !== -1
      return tag1 && this.valueLegend
    },
    slideMode() {
      return this.$store.state.slideMode
    }
  },
  watch: {
  },
  created() {
    this.$MITT_BUS.on('map-loaded', function () {
    })
    this.$MITT_BUS.on('send-pipline-realdata', (v) => {
      const layer = LayerObj['heat:pipline'];
      function queryFeaturesByAttribute(attributeName, attributeValue) {
        const vectorLayer = layer/* 获取你的矢量图层 */;
        const source = vectorLayer.getSource();
        const features = source.getFeatures();
        features.forEach(feature => {
          feature.setStyle(null);
        })
        if (!(v.count % 2)) {
          return []
        }
        const matchingFeatures = features.filter(feature => {
          const attribute = feature.get(attributeName);
          return Number(attribute) > attributeValue[0] && Number(attribute) < attributeValue[1];
        });
        return matchingFeatures;
      }
      // 示例：查询属性值为 'example' 的要素
      const attributeName = 'synx'; // 替换为实际的属性名称
      const attributeValue = v.data;
      const matchingFeatures = queryFeaturesByAttribute(attributeName, attributeValue);
      const highlightStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'rgba(0, 255, 0, 0.8)',
          // color: v.color,
          width: 4,
        })
      });
      // n 闪动的次数
      function shining(n) {
        for (let i = 0; i < 2 * n; i++) {
          setTimeout(() => {
            matchingFeatures.forEach(feature => {
              feature.setStyle(i % 2 ? highlightStyle : null);
            })
          }, i * 300)
        }
      }
      if (matchingFeatures.length) {
        shining(4);
      }
    })
  },
  mounted() {
    // 初始化图层数据
    // this.initLayer();
    // 添加点击事件的监听
    this.addEventListener();
    this.$MITT_BUS.on('send-huanrezhan-data', ({ data }) => {
      this.putOverlayHRZ(null, Object.assign(data, {
        geometry: {
          flatCoordinates: data.coordinates
        }
      }))
    })
    // 启动监听
    this.onRerenderHighLightLayer();
  },
  beforeUnmount() {
    this.clearLayers();
  },
  unmounted() {
    this.$MITT_BUS.off('rerender-highlight-layer', rerenderHighlightLayer);
    rerenderHighlightLayer = () => { };
    this.$MITT_BUS.off('recive-tabledata', reciveTabledata)
    reciveTabledata = () => { };
  },
  methods: {
    clearLayers() {
      // 清除所有的图层
      if (overlayIns) {
        MAIN_STORE.GLOBAL_MAP_INS.removeOverlay(overlayIns)
        overlayIns = null;
      }
      SelectedLine = null;
      SelectedArea = null;

      ListenerClick = null;
      ListenerMove = null;

      Object.keys(LayerObj).forEach(v => {
        let tempL = LayerObj[v];
        if (Array.isArray(tempL)) {
          tempL.forEach(v_ => {
            MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v_);
          })
        } else {
          MAIN_STORE.GLOBAL_MAP_INS.removeLayer(LayerObj[v]);
        }
        LayerObj[v] = [];
      })

    },
    clearHalfLayers() {
      HalfLayer.forEach(v => {
        MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v)
      })
    },
    hideLayers() {
      // 清除所有的图层
      if (overlayIns) {
        MAIN_STORE.GLOBAL_MAP_INS.removeOverlay(overlayIns)
        overlayIns = null;
      }
      SelectedLine = null;
      SelectedArea = null;

      ListenerClick = null;
      ListenerMove = null;

      Object.keys(LayerObj).forEach(v => {
        let tempL = LayerObj[v];
        if (Array.isArray(tempL)) {
          tempL.forEach(v_ => {
            v_.setOpacity && v_.setOpacity(0.1)
            HalfLayer.push(v_)
            // MAIN_STORE.GLOBAL_MAP_INS.removeLayer(v_);
          })
        } else {
          LayerObj[v].setOpacity && LayerObj[v].setOpacity(0.1)
          HalfLayer.push(v)
          // MAIN_STORE.GLOBAL_MAP_INS.removeLayer(LayerObj[v]);
        }
        // LayerObj[v] = [];
      })
    },
    // 添加点击事件的监听
    addEventListener() {
      reciveTabledata = ({ data, type, center }) => {
        if (SelectedArea) {
          SelectedArea.setStyle(null);
        }
        switch (type) {
          case 'reyuanzhan':
            {
              const layer_ = LayerObj['heat:grz'][1].getSource().getFeatures().filter(v => v.get('SMID') == data)
              if (layer_ && layer_.length) {
                const head = layer_[0];
                const pro = head.getProperties();
                // 区分出是否是热源
                // pro['Z_SELF_TYPE'] === '热源'
                if (pro) {
                  this.putOverlayGRZ(null, pro || {});
                  return;
                }
              }
            }
            break;
          case 'huanrezhan':
            {
              const layer_ = LayerObj['heat:hrz'][0].getSource().getFeatures().filter(v => v.get('SMID') == data)
              if (layer_ && layer_.length) {
                const head = layer_[0];
                const pro = head.getProperties();
                // 区分出是否是热源
                // pro['Z_SELF_TYPE'] === '换热站'
                if (pro) {
                  this.putOverlayHRZ({
                    coordinate: center || pro.CENTER
                  }, pro || {});
                  return;
                }
              }
            }
            break;
          case 'gongrefanwei':
            {
              const layer_ = LayerObj['heat:area'][0].getSource().getFeatures().filter(v => v.get('SMID') == data)
              if (layer_ && layer_.length) {
                const head = layer_[0];
                const pro = head.getProperties();
                // 区分出是否是热源
                if (pro && pro['Z_SELF_TYPE'] === '供热范围') {
                  pro['SELF_CENTER'] = pro['CENTER']
                  this.putOverlayGRFW(null, pro || {});

                  const highlightStyle = new ol.style.Style({
                    fill: new ol.style.Fill({
                      color: 'rgba(255, 235, 95, 0.85)'
                    }),
                    stroke: new ol.style.Stroke({
                      color: 'rgba(255, 255, 255, 1)',
                      lineDash: [10, 5],
                      width: 2
                    })
                  });

                  head.setStyle(highlightStyle);
                  SelectedArea = head;
                  return;
                }
              }
            }
            break;
          case 'company':
            {
              const feature_ = LayerObj['heat:company'][0].getSource().getFeatures().filter(v => v.get('NAME') == data)
              if (feature_ && feature_.length) {
                const head = feature_[0];
                const pro = head.getProperties();
                // 区分出是否是热源
                if (pro && pro['Z_SELF_TYPE'] === '供热企业') {
                  if (head) {
                    const geom = head.getGeometry();
                    const interiorPointers = geom.getInteriorPoints();
                    const center = interiorPointers.flatCoordinates;
                    pro['SELF_CENTER'] = center.slice(0, 2)
                  } else {
                    pro['SELF_CENTER'] = pro['CENTER']
                  }
                  this.putOverlayGRQY(null, pro || {});
                  const highlightStyle = new ol.style.Style({
                    fill: new ol.style.Fill({
                      color: 'rgba(255, 25, 35, 0.5)'
                    }),
                    stroke: new ol.style.Stroke({
                      color: 'rgba(255, 255, 255, 1)',
                      lineDash: [10, 5],
                      width: 2
                    })
                  });
                  head.setStyle(highlightStyle);
                  SelectedArea = head;

                  if (head) {
                    const extent = head.getGeometry().getExtent();
                    mapIns && mapIns.getView().fit(extent, {
                      size: mapIns.getSize(),
                      duration: 1000,
                      padding: [20, 20, 20, 20]
                    })
                  }
                  return;
                }
              } else {
                if (overlayIns) {
                  MAIN_STORE.GLOBAL_MAP_INS.removeOverlay(overlayIns)
                }
              }
            }
            break;
          default:
            return
        }
      };
      // 接收列表点击事件的监听
      this.$MITT_BUS.on('recive-tabledata', reciveTabledata)

      let pixel, hit;
      ListenerMove = MAIN_STORE.GLOBAL_MAP_INS.on('pointermove', (e) => {
        pixel = MAIN_STORE.GLOBAL_MAP_INS.getEventPixel(e.originalEvent);
        hit = MAIN_STORE.GLOBAL_MAP_INS.hasFeatureAtPixel(pixel);
        if (pixel && hit) {
          MAIN_STORE.GLOBAL_MAP_INS.getTargetElement().style.cursor = 'pointer';
        } else {
          MAIN_STORE.GLOBAL_MAP_INS.getTargetElement().style.cursor = '';
        }
      });
      MAIN_STORE.GLOBAL_MAP_INS.getView().on('change:resolution', (e) => {

      })
      ListenerClick = MAIN_STORE.GLOBAL_MAP_INS.on('click', (e) => {
        // 先清除 overlay
        if (overlayIns) {
          MAIN_STORE.GLOBAL_MAP_INS.removeOverlay(overlayIns)
        }
        if (SelectedLine) {
          SelectedLine.setStyle(null);
        }
        if (SelectedArea) {
          SelectedArea.setStyle(null);
        }
        const feature = MAIN_STORE.GLOBAL_MAP_INS.forEachFeatureAtPixel(e.pixel, function (feature) {
          return feature;
        }, {
          hitTolerance: 0
        });
        if (!feature) { return }
        const pro = feature.getProperties();
        // 区分出是否是热源
        if (pro && pro['Z_SELF_TYPE'] === '热源') {
          this.putOverlayGRZ(e, pro || {});
          return;
        }

        // 区分出是否是换热站
        if (pixel && hit && feature && pro && pro['Z_SELF_TYPE'] === '换热站') {
          this.putOverlayHRZ(e, pro || {});
          return
        }

        // 区分出是否是检修井
        if (pixel && hit && feature && pro && pro['Z_SELF_TYPE'] === '检修井') {
          this.putOverlayJXJ(e, pro || {});
          return
        }

        // 区分出是否是阀门
        if (pixel && hit && feature && pro && pro['Z_SELF_TYPE'] === '阀门') {
          this.putOverlayFM(e, pro || {});
          return
        }

        // 区分出是否是供热范围
        if (pixel && hit && feature && pro && pro['Z_SELF_TYPE'] === '供热范围') {
          const geom = feature.getGeometry();
          const interiorPointers = geom.getInteriorPoints();
          const center = interiorPointers.flatCoordinates;
          pro.SELF_CENTER = center.slice(0, 2)
          this.putOverlayGRFW(e, pro || {});

          const highlightStyle = new ol.style.Style({
            fill: new ol.style.Fill({
              color: 'rgba(255, 235, 95, 0.7)'
            }),
            stroke: new ol.style.Stroke({
              color: 'rgba(180, 180, 180, .6)',
              lineDash: [10, 5],
              width: 2
            })
          });
          feature.setStyle(highlightStyle);
          SelectedArea = feature;
          return
        }

        if (pixel && hit && feature && pro && pro['Z_SELF_TYPE'] === '供热企业') {
          // 供热企业-AREA
          const highlightStyle = new ol.style.Style({
            fill: new ol.style.Fill({
              color: 'rgba(255, 25, 35, 0.45)'
            }),
            stroke: new ol.style.Stroke({
              color: 'rgba(255, 255, 255, 1)',
              lineDash: [10, 5],
              width: 2
            })
          });
          if (pro['Z_SELF_TYPE_INNER'] === '供热企业-AREA') {
            const geom = feature.getGeometry();
            const interiorPointers = geom.getInteriorPoints();
            const center = interiorPointers.flatCoordinates;
            pro.SELF_CENTER = center.slice(0, 2)
            this.putOverlayGRQY(e, pro || {});

            feature.setStyle(highlightStyle);
            SelectedArea = feature;
            return
          }
          if (pro['Z_SELF_TYPE_INNER'] === '供热企业-POINT') {
            let SMID = feature.get('SMID');

            const features = LayerObj['heat:company'][0].getSource().getFeatures().filter(v => {
              return v.get('SMID') === SMID
            })

            if (features && features[0]) {
              let feature = features[0];

              this.putOverlayGRQY(e, pro || {});
              feature.setStyle(highlightStyle);
              SelectedArea = feature;
            }
          }

        }

        // 区分管线
        if (pixel && hit && feature && pro['Z_SELF_TYPE'] === '供热管线') {
          const highlightStyle = new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'rgba(0, 255, 0, 0.5)',
              width: 4
            })
          });
          this.putOverlayLINE(e, pro || {});
          feature.setStyle(highlightStyle);
          SelectedLine = feature;
          return
        }
      })
    },
    // 供热管线
    putOverlayLINE(e, pro) {
      Api.getDataOfGRGX({
        ids: [pro.SMID],
        fields: [
          "SMID",
          "GXDBH",
          "QDPTMS",
          "ZDPTMS",
          "QDPTGC",
          "ZDPTGC",
          "GXCZ",
          "GXGJ",
          "QSDW",
          "SZPOS",
          "MSFS",
          "TSJZ",
          "GXLT"
        ]
      }).then(res => {
        if (res.features && res.features.length) {
          const head = res.features[0];
          const pro = head.properties;
          const coordinate = e.coordinate;
          if (!coordinate) { return }
          const [longitude, latitude] = coordinate;
          const unid = new Date().getTime();
          const app = createApp({
            render() {
              return h(informationHeat, {
                mainTitle: `供热管线`,
                type: 'HEAT-LINE',
                stationType: 'HRZ',
                id: pro.GXDBH,
                showButtom: true,
                heightGap: '0rem',
                listData: [{
                  name: '所在位置',
                  value: pro.SZPOS
                }, {
                  name: '权属单位',
                  value: pro.QSDW
                }, {
                  name: '管径',
                  value: pro.GXGJ
                }, {
                  name: '材质',
                  value: pro.GXCZ
                },
                // {
                //   name: '埋深（起点/终点）',
                //   value: `${pro.QDPTMS}/${pro.ZDPTMS}`
                // },
                {
                  name: '高程（起点/终点）',
                  value: `${pro.QDPTGC}/${pro.ZDPTGC}`
                }, {
                  name: '编号',
                  value: pro.GXDBH
                }],
                additionListData: [{
                  name: '埋设方式',
                  value: pro.MSFS
                }, {
                  name: '输送材质',
                  value: pro.TSJZ
                }, {
                  name: '线型',
                  value: pro.GXLT
                }]
              });
            }
          })
          const parent = document.createElement('div');
          const el = app.mount(parent).$el;
          // 创建Overlay
          const overlay = new ol.Overlay({
            id: unid,
            element: el,
            offset: [0, -15],
            positioning: 'bottom-center',
            insertFirst: false,
            stopEvent: true
          });
          overlayIns = overlay;
          MAIN_STORE.GLOBAL_MAP_INS.addOverlay(overlay); // 将Overlay添加到地图
          overlay.setPosition(coordinate); // 设置Overlay的位置
        }
      })

    },
    // 换热站
    putOverlayHRZ(e, pro) {
      Api.getDataOfHRZ({
        ids: [pro.SMID],
        fields: [
          'HRZMC',
          'GRGS',
          'DWMC',
          'HRZDZ',
          'FZR',
          'LXFS',
          'SFZG',
          'HRZWZ',
          'HRZLX',
          'FWGRXQMC',
          'HRZBM',
          'GRJMHS',
          'FWFJMHS'
        ]
      }).then(res => {
        if (res.features && res.features.length) {
          const head = res.features[0];
          const pro = head.properties;
          if (overlayIns) {
            MAIN_STORE.GLOBAL_MAP_INS.removeOverlay(overlayIns)
          }
          const coordinate = e.coordinate;
          if (!coordinate) { return }
          const [longitude, latitude] = coordinate;
          const unid = new Date().getTime();
          const app = createApp({
            render() {
              return h(informationHeat, {
                mainTitle: '换热站',
                type: 'HRZ',
                stationType: 'HRZ',
                id: pro.HRZBM,
                mainTitleHide: pro.HRZMC,
                showButtom: true,
                heightGap: '2rem',
                listData: [{
                  name: '换热站名称',
                  value: pro.HRZMC
                }, {
                  name: '热源名称',
                  value: pro.GRGS
                }, {
                  name: '供热企业',
                  value: pro.DWMC
                }, {
                  name: '换热站地址',
                  value: pro.HRZDZ
                }, {
                  name: '负责人',
                  value: pro.FZR
                }, {
                  name: '联系方式',
                  value: pro.LXFS
                }, {
                  name: '是否自管',
                  value: pro.SFZG
                }],
                additionListData: [{
                  name: '换热站位置',
                  value: pro.HRZWZ
                }, {
                  name: '换热站类型',
                  value: pro.HRZLX
                }, {
                  name: '服务供热小区',
                  value: pro.FWGRXQMC
                }, {
                  name: '供热居民户数',
                  value: Number(Number(pro.GRJMHS).toFixed(0))
                }, {
                  name: '服务非居民户数',
                  value: Number(Number(pro.FWFJMHS).toFixed(0))
                }]
              });
            }
          })
          const parent = document.createElement('div');
          const el = app.mount(parent).$el;
          // 创建Overlay
          const overlay = new ol.Overlay({
            id: unid,
            element: el,
            offset: [0, -25],
            positioning: 'bottom-center',
            insertFirst: false,
            stopEvent: true
          });
          overlayIns = overlay;
          MAIN_STORE.GLOBAL_MAP_INS.addOverlay(overlay); // 将 Overlay 添加到地图
          overlay.setPosition(coordinate); // 设置 Overlay 的位置
        }
      })
      return;

    },
    // 供热站
    putOverlayGRZ(e, pro) {
      if (overlayIns) {
        MAIN_STORE.GLOBAL_MAP_INS.removeOverlay(overlayIns)
      }
      const coordinate = pro.geometry.flatCoordinates;
      if (!coordinate) { return }
      const [longitude, latitude] = coordinate;
      const unid = new Date().getTime();
      const app = createApp({
        render() {
          return h(informationHeat, {
            mainTitle: '热源',
            type: 'GRZ',
            stationType: 'GRZ',
            id: pro.ZJBM,
            mainTitleHide: pro.ZDMC,
            showButtom: true,
            heightGap: '2rem',
            additionListData: [],
            listData: [{
              name: '站点名称',
              value: pro.ZDMC
            }, {
              name: '单位名称',
              value: pro.DWMC
            }, {
              name: '热源地址',
              value: pro.RYDZ
            }, {
              name: '负责人',
              value: pro.FZR
            }, {
              name: '联系方式',
              value: pro.LXFS
            }]
          });
        }
      })

      const parent = document.createElement('div');
      const el = app.mount(parent).$el;
      // 创建Overlay
      const overlay = new ol.Overlay({
        id: unid,
        element: el,
        offset: [0, -25],
        positioning: 'bottom-center',
        insertFirst: false,
        stopEvent: true
      });
      overlayIns = overlay;
      MAIN_STORE.GLOBAL_MAP_INS.addOverlay(overlay); // 将Overlay添加到地图
      overlay.setPosition(coordinate); // 设置Overlay的位置
    },
    // 供热范围
    putOverlayGRFW(e, pro) {
      if (overlayIns) {
        MAIN_STORE.GLOBAL_MAP_INS.removeOverlay(overlayIns)
      }
      const coordinate = pro['SELF_CENTER'];
      if (!coordinate) { return }
      const [longitude, latitude] = coordinate;
      const unid = new Date().getTime();
      const app = createApp({
        render() {
          return h(informationHeat, {
            mainTitle: '供热小区',
            type: 'XQ',
            uiSize: 'small-size',
            stationType: 'XQ',
            id: unid,
            showButtom: true,
            heightGap: '2rem',
            additionListData: [],
            listData: [{
              name: '区域名称',
              value: pro.QYMC
            }, {
              name: '换热站名称',
              value: pro.HRZMC
            }]
          });
        }
      })

      const parent = document.createElement('div');
      const el = app.mount(parent).$el;
      // 创建Overlay
      const overlay = new ol.Overlay({
        id: unid,
        element: el,
        offset: [0, 0],
        positioning: 'bottom-center',
        insertFirst: false,
        stopEvent: true
      });
      overlayIns = overlay;
      MAIN_STORE.GLOBAL_MAP_INS.addOverlay(overlay); // 将Overlay添加到地图
      overlay.setPosition(coordinate); // 设置Overlay的位置
    },
    // 供热企业
    putOverlayGRQY(e, pro) {
      if (overlayIns) {
        MAIN_STORE.GLOBAL_MAP_INS.removeOverlay(overlayIns)
      }
      let coordinate = pro['SELF_CENTER'];
      // 特殊处理 有真实的企业中心
      if (pro['LON'] && pro['LAT']) {
        coordinate = [pro['LON'], pro['LAT']]
      }
      if (!coordinate) { return }
      const [longitude, latitude] = coordinate;
      const unid = new Date().getTime();
      const app = createApp({
        render() {
          return h(informationHeat, {
            mainTitle: '供热企业',
            type: 'QY',
            uiSize: 'small-size',
            stationType: 'QY',
            id: unid,
            showButtom: true,
            heightGap: '2rem',
            additionListData: [],
            listData: [{
              name: '名称',
              value: pro.NAME
            }, {
              name: '企业地址',
              value: pro.ADDRESS
            }]
          });
        }
      })

      const parent = document.createElement('div');
      const el = app.mount(parent).$el;
      // 创建Overlay
      const overlay = new ol.Overlay({
        id: unid,
        element: el,
        offset: [0, 0],
        positioning: 'bottom-center',
        insertFirst: false,
        stopEvent: true
      });
      overlayIns = overlay;
      MAIN_STORE.GLOBAL_MAP_INS.addOverlay(overlay); // 将Overlay添加到地图
      overlay.setPosition(coordinate); // 设置Overlay的位置
    },
    // 检修井
    putOverlayJXJ(e, pro) {
      Api.getDataOfJXJ({
        ids: [pro.SMID],
        fields: [
          "SMID",
          "SSCODE",
          "DMGC",
          "SZPOS",
          "QSDW",
          "GXJSXZ"
        ]
      }).then(res => {
        if (res.features && res.features.length) {
          const head = res.features[0];
          const pro = head.properties;
          const coordinate = e.coordinate;
          if (!coordinate) { return }
          const [longitude, latitude] = coordinate;
          const unid = new Date().getTime();
          const app = createApp({
            render() {
              return h(informationHeat, {
                mainTitle: `检修井`,
                type: 'JXJ',
                stationType: 'JXJ',
                id: unid,
                showButtom: true,
                heightGap: '0rem',
                listData: [{
                  name: '所在位置',
                  value: pro.SZPOS
                }, {
                  name: '权属单位',
                  value: pro.QSDW
                }, {
                  name: '地面高程',
                  value: pro.DMGC
                }, {
                  name: '设施编号',
                  value: pro.SSCODE
                }, {
                  name: '井室形状',
                  value: pro.GXJSXZ
                }]
              });
            }
          })
          const parent = document.createElement('div');
          const el = app.mount(parent).$el;
          // 创建Overlay
          const overlay = new ol.Overlay({
            id: unid,
            element: el,
            offset: [0, -15],
            positioning: 'bottom-center',
            insertFirst: false,
            stopEvent: true
          });
          overlayIns = overlay;
          MAIN_STORE.GLOBAL_MAP_INS.addOverlay(overlay); // 将Overlay添加到地图
          overlay.setPosition(coordinate); // 设置Overlay的位置
        }
      })
    },
    // 阀门
    putOverlayFM(e, pro) {
      Api.getDataOfFAMEN({
        ids: [pro.SMID],
        fields: [
          "SMID",
          "SSCODE",
          "DMGC",
          "SZPOS",
          "QSDW",
          "GXJSXZ"
        ]
      }).then(res => {
        if (res.features && res.features.length) {
          const head = res.features[0];
          const pro = head.properties;
          const coordinate = e.coordinate;
          if (!coordinate) { return }
          const [longitude, latitude] = coordinate;
          const unid = new Date().getTime();
          const app = createApp({
            render() {
              return h(informationHeat, {
                mainTitle: `阀门`,
                type: 'FM',
                stationType: 'FM',
                id: unid,
                showButtom: true,
                heightGap: '0rem',
                listData: [{
                  name: '所在位置',
                  value: pro.SZPOS
                }, {
                  name: '权属单位',
                  value: pro.QSDW
                }, {
                  name: '地面高程',
                  value: pro.DMGC
                }, {
                  name: '设施编号',
                  value: pro.SSCODE
                }, {
                  name: '井室形状',
                  value: pro.GXJSXZ
                }]
              });
            }
          })
          const parent = document.createElement('div');
          const el = app.mount(parent).$el;
          // 创建Overlay
          const overlay = new ol.Overlay({
            id: unid,
            element: el,
            offset: [0, -15],
            positioning: 'bottom-center',
            insertFirst: false,
            stopEvent: true
          });
          overlayIns = overlay;
          MAIN_STORE.GLOBAL_MAP_INS.addOverlay(overlay); // 将Overlay添加到地图
          overlay.setPosition(coordinate); // 设置Overlay的位置
        }
      })
    },
    checkChange_(value, tag) {
      const mapIns = MAIN_STORE.GLOBAL_MAP_INS;
      if (!mapIns) {
        return;
      }
      const mapboxStyle = MAIN_STORE.MAPBOX_STYLE;
      if (!mapboxStyle) {
        return;
      }
      const styleObj = MAIN_STORE.STYLE_OBJ;
      if (!styleObj) {
        return;
      }
      const [targetLayer] = styleObj.layers.filter((v) => {
        return v.id === value.id;
      });
      if (!targetLayer) {
        return;
      }
      targetLayer.layout.visibility = tag ? "visible" : "none";
      mapboxStyle.updateStyles(styleObj.layers);
      mapboxStyle.clearSelectedObjects();
      MAIN_STORE.VECTOR_LAYER && MAIN_STORE.VECTOR_LAYER.changed();
    },
    checkChange(value, tag) {
      const layers = LayerObj[value.layerName]
      if (layers && layers.length) {
        layers.forEach(layer => {
          MAIN_STORE.GLOBAL_MAP_INS.removeLayer(layer);
        })
        LayerObj[value.layerName] = [];
      }
      if (tag) {
        LoadGeoServerReso(value.layerName);
      } else {
        // const layers = LayerObj[value.layerName]
        // if (layers && layers.length) {
        //   layers.forEach(layer => {
        //     MAIN_STORE.GLOBAL_MAP_INS.removeLayer(layer);
        //   })
        //   LayerObj[value.layerName] = [];
        // }
      }
    },
    initLayer() {
      if (!MAIN_STORE) { return }
      for (let i = 0; i < this.defaultCheckedKeys.length; i++) {
        const item = this.defaultCheckedKeys[i];
        setTimeout(() => {
          LoadGeoServerReso(item);
        }, i * 200)
      }
    },
    expandAll() {
      this.collapsed = false;
    },
    foldAll() {
      this.collapsed = true;
    },
    // 该方法接收 全局总览页面 -> 供热数据总览 传递过来的数据，判断哪些图层高亮显示
    // 其实是非该图层显示
    onRerenderHighLightLayer() {
      rerenderHighlightLayer = ({ data, type, hideLayers = true }) => {
        // 筛选出公司 思路：重新加载数据
        if (type === 'enterprise') {
          if (MAIN_STORE.BASE_LAYER_INS) {
            MAIN_STORE.BASE_LAYER_INS.setOpacity(1)
          }
          this.clearLayers();
          this.initLayer();
          return
        }

        // 将底图置灰 必须操作
        if (MAIN_STORE.BASE_LAYER_INS) {
          MAIN_STORE.BASE_LAYER_INS.setOpacity(0.25)
        }
        // 隐藏所有的图层
        if (hideLayers) {
          // this.hideLayers();
          this.clearLayers();
        }

        if (type === 'company') {
          AddGongreCompany('heat:company', data, () => {
            const layer = LayerObj['heat:company']
            if (layer[0]) {
              const head = layer[0];
              const layerExtent = head.getSource().getExtent();

              MAIN_STORE.GLOBAL_MAP_INS.getView().fit(layerExtent, {
                padding: [100, 20, 100, 20],
                size: MAIN_STORE.GLOBAL_MAP_INS.getSize(),
                nearest: false,
                duration: 0,
                easing: ol.easing.easeOut
              });
            }
          })
        }
        if (type === 'heat-source') {
          AddGonrezhanLayer('heat:grz', data, () => {
            const layer = LayerObj['heat:grz']
            if (layer[0]) {
              const head = layer[0];
              const layerExtent = head.getSource().getExtent();

              MAIN_STORE.GLOBAL_MAP_INS.getView().fit(layerExtent, {
                padding: [150, 20, 100, 20], // 在四个方向上添加填充
                size: MAIN_STORE.GLOBAL_MAP_INS.getSize(), // 考虑地图的大小
                nearest: false, // 如果设置为true，则缩放级别将被舍入到最近的整数
                duration: 1000, // 动画持续时间（毫秒）
                easing: ol.easing.easeOut // 可以选择缓动函数
              });
            }
          })
        }
        if (type === 'heat-huanre') {
          AddHuanrezhanLayer('heat:hrz', data, () => {
            const layer = LayerObj['heat:hrz']
            if (layer[0]) {
              const head = layer[0];
              const size = head.getSource().getFeatures().length;
              if (size > 2) {
                const layerExtent = head.getSource().getExtent();
                MAIN_STORE.GLOBAL_MAP_INS.getView().fit(layerExtent, {
                  padding: [100, 20, 100, 20],
                  size: MAIN_STORE.GLOBAL_MAP_INS.getSize(),
                  nearest: false,
                  duration: 1000,
                  easing: ol.easing.easeOut
                });
              }
            }
          })
        }
        if (type === 'heat-fanwei') {
          AddGongreFanwei('heat:area', data, () => {
            const layer = LayerObj['heat:area']
            if (layer[0]) {
              const head = layer[0];
              const layerExtent = head.getSource().getExtent();

              MAIN_STORE.GLOBAL_MAP_INS.getView().fit(layerExtent, {
                padding: [100, 20, 100, 20],
                size: MAIN_STORE.GLOBAL_MAP_INS.getSize(),
                nearest: false,
                duration: 0,
                easing: ol.easing.easeOut
              });
            }
          })
        }
      };
      this.$MITT_BUS.on('rerender-highlight-layer', rerenderHighlightLayer)
    },

    // 切换显示检修井
    toggleRenderJianxiujingLayer({ data }) {
      // 检修井
      if (LayerObj['heat:well']) {
        LayerObj['heat:well'].forEach(v => {
          v.setVisible(data)
        })
      }
    },
    // 切换显示阀门
    toggleRenderFamenLayer({ data }) {
      // 检修井
      if (LayerObj['heat:falve']) {
        LayerObj['heat:falve'].forEach(v => {
          v.setVisible(data)
        })
      }
    },
  },
};
</script>

<template>
  <div class="layer-tree" :class="[
    collapsed ? 'collapsed' : '',
    ['Search', 'Decision'].indexOf($route.name) !== -1 ? '' : '',
    slideMode ? 'stick-side' : ''
  ]">
    <div class="header">
      <div v-if="collapsed" class="icon-area colla hover-pointer" @click="expandAll">
        <el-icon>
          <Fold color="#fff" />
        </el-icon>
      </div>
      <span v-if="!collapsed" class="title font-alimamashuheiti">
        数据图层
      </span>
      <div v-if="!collapsed" class="icon-area expand hover-pointer" @click="foldAll">
        <el-icon>
          <Expand color="#fff" />
        </el-icon>
      </div>
    </div>
    <div class="function" v-if="!collapsed">
      <!-- <el-switch v-model="valueFlow" inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #666666"
        active-text="展示流向" inactive-text="隐藏流向" />
      <el-switch v-if="['Search', 'Decision'].indexOf($route.name) !== -1" v-model="valueLegend" inline-prompt
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #666666; margin-left: 1rem;" active-text="展示图例"
        inactive-text="隐藏图例" /> -->
    </div>

    <el-tree v-show="!collapsed" ref="layerTree" class="self-tree" :data="treeData" :props="defaultProps" node-key="id"
      :check-strictly="true" :default-checked-keys="defaultCheckedKeys" :default-expanded-keys="defaultCheckedKeys"
      @check-change="checkChange" empty-text="暂无数据">
      <template #default="{ node, data }">
        <el-checkbox v-if="node.isLeaf" v-model="node.checked"></el-checkbox>
        <div class="name">
          <!-- <span> -->
          <img v-if="node.isLeaf" style="width: 20px; height: 20px" :src="data.icon" alt="">

          <img v-else src="./images/icon-folder.svg" alt="">
          <!-- </span> -->
          <span style="margin-left: 5px;">{{ data.name }}</span>
        </div>
      </template>
    </el-tree>
    <div class="legend" v-if="showLegend">
    </div>
  </div>

</template>
<style>
/* 全局样式文件 global.css 或 main.css */

.self-tree .el-checkbox__input .el-checkbox__inner {
  border-radius: 0 !important;
}

/* 鼠标浮动过的背景颜色 */
.self-tree .el-tree-node__content:hover {
  background-image: linear-gradient(270deg,
      rgba(8, 35, 78, 0.8) 0%,
      rgba(69, 193, 255, 0.9) 100%);
  ;
}

/* 鼠标点击时节点的背景颜色 */
.self-tree .el-tree-node:focus>.el-tree-node__content {
  background-color: #282e4d !important;
  color: rgb(255, 255, 255);
}

/* 鼠标失去焦点时节点背景的颜色 */
.self-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #282e4d;
}
</style>
<style lang="less" scoped>
.layer-tree {
  position: fixed;
  z-index: 1;
  right: 46rem;
  top: 11rem;
  pointer-events: all;
  font-size: 3rem;
  width: 25rem;
  border-radius: initial;
  background-image: linear-gradient(90deg, rgba(16, 49, 102, 0.9) 13%, rgba(8, 35, 78, 0.8) 91%);
  padding-bottom: 1rem;
  transition: all .3s;

  &.stick-side {
    right: 1.5rem;
  }

  &:hover {
    box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.2);
  }

  &.collapsed {
    width: initial;
    height: initial;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: initial;
    padding-bottom: 0;
    box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.2);
  }

  &>.header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &>.title {
      font-size: 1.5rem;
      color: #fff;
      padding-left: 1rem;
    }

    &>.icon-area {
      width: 4rem;
      height: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;

      &.expand {
        z-index: 2;
      }
    }
  }

  &>.function {
    padding-left: 1rem;

  }
}

.legend {
  position: fixed;
  bottom: 10rem;
  right: 10rem;
  width: 25rem;
  height: 30rem;
  background-color: #fff;
  background-image: url(@/assets/images/legend.jpg);
  background-size: 100% 100%;
}

.self-tree {
  max-height: 50rem;
  overflow-y: auto;
  background-color: transparent;
}

.self-tree .el-tree-node__content .name {
  color: #fff;
  font-family: "ALIBABAPUHUI-REGU";
  display: inline-flex;
  align-items: center;
}

.self-tree .el-checkbox__inner {
  border-radius: 0 !important;
}
</style>
